import GameControl from "./GameControl"
class Snake {
    //表示🐍头的元素
    head: HTMLElement
    //获得蛇身(包括蛇头) HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合
    bodies: HTMLCollection
    //获取🐍的容器
    snake: HTMLElement
    constructor() {
        this.snake = document.getElementById('snake')!
        this.head = document.querySelector('#snake div')!
        //这样子可以解决不断刷新的问题 getElementsByTagName得到的是一个集合
        this.bodies = this.snake.getElementsByTagName('div')

    }
    //获取蛇头的坐标
    get X() {
        return this.head.offsetLeft
    }
    get Y() {
        return this.head.offsetTop
    }
    //设置蛇头的坐标
    set X(value) {
        //如果新值和旧值相同，则直接返回不再修
        if (this.X === value) {
            return
        }
        //判断是否撞墙0-290
        if (value < 0 || value > 290) {
            //进入判断说明撞墙了
            throw new Error("bb撞墙了！");
        }

        //修改X时候是在修改水平坐标，🐍不能掉头
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
            setTimeout(() => {
                alert('！！！bb自杀啦！！！！！！')
                alert('点击重新开始游戏')
                location.reload();
            }, 10);
        }

        //移动身体
        this.moveBody()
        this.head.style.left = value + 'px'
        //检查自吞
        this.checkHead()
    }
    set Y(value) {
        if (this.Y === value) {
            return
        }
        if (value < 0 || value > 290) {
            //进入判断说明撞墙了
            throw new Error("bb撞墙了！");
        }
        if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
            setTimeout(() => {
                alert('！！！bb自杀啦！！！！！！')
                alert('点击重新开始游戏')
                location.reload();
            }, 10);
        }

        //移动身体
        this.moveBody()
        this.head.style.top = value + 'px'
        //检查自吞
        this.checkHead()
    }

    //增加身体
    addBody() {
        //向snake容器添加身体  beforeend插入元素内部的最后一个子节点之后。
        this.snake.insertAdjacentHTML("beforeend", "<div></div>")
    }
    //移动身体
    moveBody() {
        //将后边的身体设置为前边身体的位置 从后往前

        // 第4节 = 第3节的位置
        // 第3节 = 第2节的位置
        // 第2节 = 蛇头的位置

        //遍历从后往前
        for (let i = this.bodies.length - 1; i > 0; i--) {
            //获取前面身体的位置
            let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
            let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;

            //赋值给当前身体上
            (this.bodies[i] as HTMLElement).style.left = X + 'px';
            (this.bodies[i] as HTMLElement).style.top = Y + 'px'
        }
    }

    //自吞
    checkHead() {
        //获取所有身体，检查是否和蛇头重叠
        for (let i = 1; i < this.bodies.length; i++) {
            let bd = (this.bodies[i] as HTMLElement);
            if (this.X === bd.offsetLeft && this.Y === bd.offsetTop) {
                //说明蛇头自吞乐
                throw new Error("！！bb撞到自己了，又自杀啦！！！");
            }

        }
    }

}
export default Snake


